<template>
  <div>
    <div class="lick1">
      <div class="lick">
        <p class="p1">音乐品味</p>
        <div class="ps" @click="xh()">
          <div class="imgs">
            <img src="xin.png" alt="" />
          </div>
          <div class="p">
            <p class="p2">我喜欢的音乐</p>
            <p class="p3">333首，播放616.7万次</p>
          </div>
        </div>
      </div>
      <Gd />
      <Sc />
      <Xq />
    </div>
  </div>
</template>

<script>
import Gd from "./gedan.vue";
import Sc from "./shcang.vue";
import Xq from "./xiangx.vue";
export default {
  methods: {
    xh() {
      this.$router.push("/lick");
    },
  },
  components: {
    Gd,
    Sc,
    Xq,
  },
};
</script>

<style scoped>
.lick1 {
  background-color: #f4f4f6;
  padding-left: 0.34rem;
}
.lick {
  width: 6.84rem;
  height: 2.47rem;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 0.25rem;
  vertical-align: middle;
}
.p1 {
  padding-top: 0.45rem;
  font-size: 0.37rem;
  color: #343434;
  font-weight: 600;
  padding-left: 0.69rem;
}
.p {
  display: inline-block;
}
.ps {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.p2 {
  font-size: 0.3rem;
  color: #2f2f2f;
  font-weight: 550;
  vertical-align: middle;
  margin-bottom: 0.17rem;
}
.p3 {
  font-size: 0.2rem;
  color: #bababa;
  font-weight: 550;
}
.imgs {
  display: inline-block;
  margin-top: 0.33rem;
  width: 1.03rem;
  height: 1.03rem;
  border-radius: 00.14rem;
}
img {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 00.14rem;
}
</style>